<template>
  <div class="indexHeader">
    <div class="left">微啪后台管理系统({{versionText}})</div>
    <div class="right">
      <img src="../assets/images/0.jpg" alt class="avatar" />
      <!-- <el-avatar src="../assets/images/0.jpg"></el-avatar>/ -->
      <el-dropdown>
        <span class="el-dropdown-link">
          {{showAccount}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
          
          <el-dropdown-item @click.native="modifyInfo">修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> 
    </div>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    return {
      showAccount: "",
      versionText:"",
    };
  },
  mounted() {
    if (this.$cookies.get("account")) {
      this.showAccount = this.$cookies.get("account");
    }
    // console.log(process.env.BASE_URL);
    if(process.env.BASE_URL=='http://app.dylite.ipx.mx'){
            this.versionText="测试版";
    }else if(process.env.BASE_URL=='http://wp-api.admincloud.me'){
            this.versionText="正式版";
    };
  },
  methods: {
    //退出
    loginOut() {
      this.$confirm("确定退出此操作系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$cookies.set("token", "");
          this.$cookies.set("expired", "");
          this.$cookies.set("account", "");
          this.$router.push({ path: "/" });
        })
        .catch(() => {});
    },
    
    modifyInfo(){
      this.$router.push({ path: "/modifyInfo" });
    }
  }
};
</script>
<style scoped>
.indexHeader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
  color: #fff;
}
.avatar {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}
.left {
  font-size: 0.18rem;
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dropdown {
  color: #fff;
  cursor: pointer;
}
</style>


